﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mongo</title>
   
</head>
<style>  
      
    body {  
     
    font-family: 'trebuchet MS', 'Lucida sans', Arial;  
    font-size: 13px;  
		color:#3b5fcc      ;
		margin:0px
    } 
    table {  
     
    border-spacing: 0;  
    width: 100%;  
    }  
      
    table{ color:#000; }
 
 div{padding:0px}
      
     tr:hover {  
    background: #436eee;  
    -o-transition: all 0.1s ease-in-out;  
    -webkit-transition: all 0.1s ease-in-out;  
    -moz-transition: all 0.1s ease-in-out;  
    -ms-transition: all 0.1s ease-in-out;  
    transition: all 0.1s ease-in-out;  
    }  
      
     td,  th { 
		    border-left: 1px solid #436eee;  
		    padding: 1px;  
		    text-align: left;  
		    background-color: #dce9f9
		    -webkit-box-shadow: 0 1px 0 #436eee inset;  
		    -moz-box-shadow:0 1px 0 #436eee inset;  
		    box-shadow: 0 1px 0 #436eee inset;  
		   
    } 
    </style>  

<body> 
			<div  >
							<select id="tables"  onchange="changeTable()">
								
							</select>

							<select id="fieldName">
							</select>
							
							<select id="type" >
								<option value='like' selected >like</option>
								<option value='eq'>=</option>
								<option value='gte'>》</option>
								<option value='lte'>《</option>
						
							</select>

							<input id="fieldValue"	></input>
							<button type="button" onclick="query(0)">查询</button>
							
							<div id="pageDiv" style="Float:right;padding-right:100px"> 	</div>
			</div>
<div>
	<table >
		<thead id="dataTableHead">
		</thead>
		
	  <tbody id="dataTableBody">
		</tbody>
		
		
	</table>
	
</div>

</body>


<script>
     var xmlHttpReg = null;

    if (window.ActiveXObject) {//如果是IE
        xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
     } else if (window.XMLHttpRequest) {
        xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
     }
function myReflash(url,fun){

		  this.url="http://127.0.0.1:12137"+url; 
			 xmlHttpReg.open("get", this.url, true);
			 xmlHttpReg.send();
			 xmlHttpReg.onreadystatechange =  function () {
        if (xmlHttpReg.readyState == 4 && xmlHttpReg.status == 200) {//4代表执行完成
	        var res= JSON.parse(xmlHttpReg.responseText)
	        fun(res)
        }
		    if(xmlHttpReg.readyState == 4 &&(xmlHttpReg.status == 0||xmlHttpReg.status == 404) ){
		    	alert("网络异常"+url)
		    }
    }; 
	}
	var fieldNameClear=true;
	
	function changeTable(){
		
					document.getElementById("fieldName").innerHTML="";
					fieldNameClear=true;
		}
	
	
	function add(fields, name){
		if(name=="_id"){
					return;
			}
			for(var k =0;k<fields.length;k++){
				if(fields[k]==name){
					return;
				}
			}
			fields.push(name)
	}
	
	function initHeader(content){
		    var fields=[];
				for ( var i=0; i <content.length; i++) {
					var data= content[i];
						for(var j in data){
							add(fields, j)
						}	 
				}
				var dataTableHeadHtml="<tr>";
				var selectNameOption="";
				for(var	 k =0;k<fields.length;k++){
						dataTableHeadHtml+="<th>"+fields[k]+"</th>"
						selectNameOption+="<option value='"+fields[k]+"'>"+fields[k]+"</option>"	
					}
				dataTableHeadHtml+="</tr>";
				document.getElementById("dataTableHead").innerHTML=dataTableHeadHtml;
				if(fieldNameClear){
					document.getElementById("fieldName").innerHTML=selectNameOption;
					fieldNameClear=false;
				}
				return fields;
		}
	var 	showBegin=0;
	var pageSize=100;
	
	function query(cPage){
		  showBegin=cPage;
		  var table=		document.getElementById("tables").value;
		  var fieldName=		document.getElementById("fieldName").value;
		  var type=		document.getElementById("type").value;
		  var fieldValue=		document.getElementById("fieldValue").value;
			var url = "/log/all/"+pageSize+"/"+table+"/"+cPage+"/"+fieldName+"/"+type+'/'+fieldValue
			myReflash(url,function(res){
					var option=""
					var content = res.data.content
					
					var fields=initHeader(content)
					for ( var i= 0; i <content.length; i++) {
						var data= content[i];
						option+="<tr>";
						for(var	 k =0;k<fields.length;k++){
							var v=data[fields[k]]||"";
							option+="<td>"+v+"</td>"
						}
						option+="</tr>"
					}
					document.getElementById("dataTableBody").innerHTML=option;
					var size=	res.data.totalSize
					var page="";
					if(showBegin!=0){
						page+="<a href='#' onClick='query(0)'>1</a>&nbsp;";
					}

					
					for(var i=showBegin-pageSize*10;i<showBegin;i+=pageSize){
						if(i>0){
							var pageNumber=i/pageSize+1;
							page+="<a href='#' onClick='query("+i+")'>"+pageNumber+"</a>&nbsp;"
						}
					}
					
					page+="<b>"+(showBegin/pageSize+1)+"</b>"
					
					for(var i=showBegin+pageSize;i<size&&i<showBegin+10*pageSize;i+=pageSize){
						var pageNumber=i/pageSize+1;
						page+="<a href='#' onClick='query("+i+")'>"+pageNumber+"</a>&nbsp;"
					}
					
					var pageNumber1=parseInt(size/pageSize)+1;
					if(pageNumber1-pageNumber!=1){
						page+="<a href='#' onClick='query("+(pageNumber1*pageSize-pageSize)+")'>"+pageNumber1+"</a>&nbsp;"
					}
				
					document.getElementById("pageDiv").innerHTML=page;
			
			})
		}

	
		myReflash("/log/tables",function(res){
					var option=""
					var content = res.data
					
			 
					for ( var i= 0; i <content.length; i++) {
						var d= content[i]; 
						option+="<option value='"+d+"'>"+d+"</option>"	 
					}
					document.getElementById("tables").innerHTML=option;
				 
				  query(0)
			})
	

</script>



</html>


